<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { onMounted, reactive } from "vue";
import { fetchGetHomeGrade } from '@/api/screen/home'

const getGradeNum = async () => {
  const res = await fetchGetHomeGrade()
  pieData[0].value = res.data.one
  pieData[1].value = res.data.two
  pieData[2].value = res.data.three
}

onMounted(() => {
  getGradeNum()
})
const pieData = reactive([
  {
    name: "大一",
    value: 2100,
  },
  {
    name: "大二",
    value: 2502,
  },
  {
    name: "大三",
    value: 3156,
  },
])
const option = reactive({
  color: ["#18F6F8", "#288CFC", "#FFD91A"],
  legend: {
    top: "10px",
    icon: "circle",
    color: "#555",
    itemWidth: 10,
    itemHeight: 10,
  },
  tooltip: {
    confine: true,
    trigger: "item",
    formatter: "{b} : {c}",
  },
  series: [
    {
      avoidLabelOverlap: false,
      type: "pie",
      roseType: "area", // 玫瑰图
      center: ["50%", "50%"],
      radius: ["30%", "60%"],
      label: {
        formatter: "{b}\n-------------\n{d}%\t{c}",
        fontSize: 16,
      },
      labelLine: {
        length: 10,
        length2: 30,
      },
      data: pieData,
    },
  ],
});
</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
